<template>
	<!-- 优惠券弹窗 -->
	<u-popup :safeAreaInsetTop="false" :show="show && showNotice.id?true:false" mode="center" :round="12">
		<view class="coupon-box">
			<view class="coupon-title">{{ showNotice.affiche_type || '' }}</view>
			<view class="coupon-content">
				{{ showNotice.title }}
			</view>
			<view class="footer-box mt-24">
				<w-button class="iknow-btn" type="dark" shape="circle"
					@click='closeCoupon'>{{handleLang('我知道了')}}</w-button>
				<w-button class="go-check-btn" shape="circle"
					@click="toNoticeDel({id: showNotice.id})">{{handleLang('前往查看')}}</w-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		getNoticeList
	} from '@/api/notice/index.js'
	export default {
		name: 'w-coupon-popup',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				noticeList: [],
				showNotice: {}
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			toNoticeDel(data) {
				this.$u.route('/pages/notice/noticeDetails', data)
				this.$emit('closeCouponIkonw', this.showNotice.id)
			},
			//获取列表
			getList() {
				getNoticeList().then(res => {
					this.noticeList = res.data.data;
					this.showNotice = this.noticeList.length ? this.noticeList[0] : {}
					let foundId = uni.getStorageSync('iKonwCloseCoupon')
					if (this.noticeList[0]?.id != foundId) {
						this.$emit('openCouponIkonw')
					}
				})
			},
			closeCoupon() {
				this.$emit('closeCouponIkonw', this.showNotice.id)
			},
			iKnow() {
				console.log('i know')
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon-box {
		// background-image: url($IMG_URL + '/static/bg/indexbg.png');
		// background-size: 600rpx auto;
		// position: relative;
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		min-height: 320rpx;
		// padding-bottom: 32rpx;
		position: relative;

		.coupon-title {
			text-align: center;
			padding: 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
		}

		.coupon-content {
			text-align: center;
			font-size: 28rpx;
			color: #666666;
			padding: 24rpx 34rpx;
		}

		.notice-box {
			padding: 24rpx 32rpx;
		}

		.right {
			width: 60%;
		}

		.footer-box {
			padding: 12rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.iknow-btn {
				width: 274rpx;
				background: #F1F0F0 !important;
				color: #999999 !important;
			}

			.go-check-btn {
				width: 274rpx;
			}
		}

		.close-btn {
			position: absolute;
			top: -64rpx;
			right: 0;
		}
	}
</style>